<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="admin/common/frame :: head(~{},~{},~{})"/>
<body>
<div class="wrap">
    <div th:replace="admin/common/frame :: left"></div>
    <div th:replace="admin/common/frame :: top"></div>
    <div class="main">
        <div class="content">
            <div id="news-container" class="container-fluid">
                <a class="btn btn-primary mb-3" data-toggle="modal" data-target="#upsertNews" href="javascript:void(0)">新增</a>
                <table class="table text-center border">
                    <thead>
                    <tr class="row mx-0">
                        <td class="col-1 border-top-0 border-right">编号</td>
                        <td class="col-2 border-top-0 border-right">展示</td>
                        <td class="col-2 border-top-0 border-right">标题</td>
                        <td class="col-4 border-top-0 border-right">概要</td>
                        <td class="col-1 border-top-0 border-right">是否下架</td>
                        <td class="col-2 border-top-0">操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="row mx-0" v-for="(news, i) in newsList">
                        <td class="col-1 p-0 border-right">{{news.id}}</td>
                        <td class="col-2 p-0 border-right">
                            <img style="width: 64px; height: 64px;" :src="news.image">
                        </td>
                        <td class="col-2 text-truncate p-0 border-right">{{news.title}}</td>
                        <td class="col-4 text-truncate small border-right" :title="news.content">{{news.content}}</td>
                        <td class="col-1 p-0 border-right">
                            <span v-bind:class="[news.deleted ? 'badge-danger' : 'badge-primary', 'badge']">{{news.deleted ? '已下架':'正常'}}</span>
                        </td>
                        <td class="col-2">
                            <button @click="updateNews(i, news)" v-bind:class="[news.deleted ? 'btn-primary' : 'btn-danger', 'btn btn-sm']">{{news.deleted ? '上架' : '下架'}}</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <th:block th:include="admin/pagenation :: page"/>
                <!-- 添加菜单面板 -->
                <div id="upsertNews" class="modal fade">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <button class="close" data-dismiss="modal">
                                    <span>×</span>
                                </button>
                            </div>
                            <div class="modal-title">
                                <h5 class="text-center">资讯管理</h5>
                            </div>
                            <div class="modal-body">
                                <form class="form-group">
                                    <div class="form-group">
                                        <label>标题</label>
                                        <input class="form-control" type="text" placeholder="请输入标题" v-model="title" required>
                                    </div>
                                    <div class="form-group">
                                        <label>图片</label>
                                        <div style="height: 70px; width: 70px; border-radius: 5px; padding: 5px; border: 1px dashed #ccc; text-align: center; line-height: 60px;" @click="add">
                                            <img v-if="image" :src="image" style="height: 60px; width: 60px;">
                                            <i v-else="image" class="fa fa-plus-square-o"></i>
                                        </div>
                                        <input hidden="hidden" class="form-control" type="file" ref="file" @change="upload">
                                    </div>
                                    <div class="form-group">
                                        <label>内容</label>
                                        <textarea class="form-control" placeholder="请输入内容" v-model="content"></textarea>
                                    </div>
                                    <div class="text-right">
                                        <button class="btn btn-primary" type="button" @click="submit">提交</button>
                                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="admin/common/scripts :: scripts"/>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.13.2.min.js"></script>
<script>
    new Vue({
        el: "#news-container",
        data: {
            currentPage: 0,
            newsList: [],
            ossParams: {
                endpoint:'oss-cn-shanghai.aliyuncs.com',
                region: "oss-cn-shanghai",
                accessKeyId: 'LTAI4G9YUAiYJih9ykdMjb8S',
                accessKeySecret: 'iWm7Us4gXWbvW3gOcgHJ9BsDsdaU7b',
                bucket: 'my-restaurant'
            },
            title: '',
            image: '',
            content: ''
        },
        created() {
            this.go(0)
        },
        methods: {
            go(direction) {
                if (this.currentPage + direction === -1) {
                    return
                }
                this.currentPage = this.currentPage + direction
                $.get('/admin/newsList', {page: this.currentPage}, res => {
                    if (res.code === -1) {
                        alert(res.message)
                        return
                    }
                    this.newsList = res.data.content
                })
            },
            updateNews(i, news) {
                let that = this
                $.post('/admin/updateNewsState', {id: news.id}, res => {
                    if (res.code === -1) {
                        alert(res.message)
                        return
                    }
                    that.$data.newsList[i].deleted = !news.deleted
                })
            },
            add() {
              this.$refs.file.click()
            },
            upload(e) {
                let that = this
                let oss = new OSS(this.ossParams);
                oss.multipartUpload(
                        new Date().getTime().toString(),
                        e.target.files[0]
                    )
                    .then(result => {
                         that.image = 'https://my-restaurant.oss-cn-shanghai.aliyuncs.com/' + result.name
                    })
            },
            submit() {
                let that = this
                $.ajax({
                    type: 'POST',
                    url: '/admin/upsertNews',
                    data: JSON.stringify({
                        title: this.title,
                        image: this.image,
                        content: this.content
                    }),
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    success: res => {
                        if (res.code === -1) {
                            alert(res.message)
                            return
                        }
                        that.title = ''
                        that.image = ''
                        that.content = ''
                        if (that.$data.newsList.length === 5) {
                            that.$data.newsList.splice(-1, 1)
                        }
                        that.$data.newsList.unshift(res.data)
                        $("#upsertNews").modal('hide')
                    },
                    dataType: 'json'
                })
            }
        }
    })
</script>
</body>
</html>